<template>
  <div>
    <!-- <BreakSpace label="维修项目列表" :containerStyle="{ marginBottom: '10px' }" /> -->
    <FilterTable
      ref="table"
      :columns="columns"
      :params="fetchParams"
      :dataSource="dataList"
      :datakey="'rows'"
      :fetchapi="fetchApi"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      selectionType="single"
      :isSelectColumn="false"
    >
    </FilterTable>
    <Drawer :visible.sync="action.visible" :title="action.title" width="70%" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <OrderPanel :type="action.type" :rowData="action.data" :chargePartition="chargePartition" :allUser="allUser" @closeDialog="closeHandler" />
    </Drawer>
  </div>
</template>
<script>
  import {  getRoLogList }  from '@/api/claim/dealer/ClaimApplication/index';
  import { getWxlxSelect } from '@/api/repair/repairReception/customer';
  import moment from 'moment';
  import { getToken, getUserId, getOwnerCode, removeDataType, getAppId, removeAppId } from '@/assets/js/auth';
  import OrderPanel from '@/pages/repair/repairManage/repairQuery/OrderPanel.vue';
  import { getAllRepairMaintain, getRepairTypes, getAllUser, getAllDealer, factoryExportRepairHistory } from '@/api/repair/repairManage/repairQuery/index.js';
  export default {
    props: ['vin','rowData'],
    components: {
    OrderPanel,
    },
    data() {
      return {
        dataList: [],
        allUser: [],
        action: { type: 'add', visible: false, title: '维修工单明细', data: {}  },
        dataList1: [],
        visible: false,
        chargePartition: [],
        visibleDrawer: false,
        collapse: false,
        infoId: null,
        // topFilterInit: this.topFilterInitFun(),
        flterValue: {}, //参数
        columns: this.creatHeader(),
        columns1: this.creatHeader1(),
        fetchApi: getRoLogList,
        fetchParams: {
          vin:this.vin,
          // ownerCode:getOwnerCode(),
          // appId:getAppId(),
        }, //ipa 接口
        selectedRows: [], //选中经销商
        formList: this.createFormList(),
        formList1: this.createFormList1(),
        saveData: null,
        activeName: '',
        menus: [
          {
            title: '审核记录',
            path: 'tabs/user',
            params: {
              type: 1
            }
          },
          {
            title: '维修历史',
            path: 'tabs/setting',
            disabled: true,
            params: {
              type: 2
            }
          }
        ]
      };
    },
    created() {
      this.getWxtypeSelect();
    },
    methods: {
      closeHandler(val, type) {
      this.action.visible = false;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
      async getWxtypeSelect() {
        const res = await getWxlxSelect();
        console.log(this.columns.find((x) => x.dataIndex === 'REPAIR_TYPE_CODE').dictItems);
        this.columns.find((x) => x.dataIndex === 'REPAIR_TYPE_CODE').dictItems = res.data.map((x) => ({
          value: x.REPAIR_TYPE_CODE + '',
          text: x.REPAIR_TYPE_NAME,
        }));
      },
      formChangeHandle(val) {
        console.log(val);
        this.saveData = val;
      },
      async createDictText(val){
        console.log(val,'valvalval');
        this.action.data.dataType = 1;
        this.action.data.startDate = moment(val.RO_CREATE_DATE).format('YYYY-MM-DD');
        this.action.data.endDate = moment(val.RO_CREATE_DATE).format('YYYY-MM-DD');
        this.action.data.roNo = val.RO_NO;
        this.action.data.ownerCode = val.OWNER_CODE;
        console.log(this.action.data);
        const res = await getAllRepairMaintain(this.action.data);
        if(res.resultCode==200){
          let row = res.data.rows[0];
          this.action.data = row;
          this.action.visible = true;
        }
        console.log(res);
    },
        // 查询收费区分
    async queryChargeList() {
      const res = await queryChargeDifferentiationList();
      if (res.resultCode == 200) {
        let items = res.data.map(x => ({ value: x.CHARGE_PARTITION_CODE + '', text: x.CHARGE_PARTITION_NAME }));
        this.chargePartition = items;
      }
    },
      async getNameByIds(parmas) {
      let res = await getNameByIds(parmas);
      if (res.resultCode == 200) {
        let userList = res.data.map(x => ({ text: x.employeeName, value: x.employeeId + '' }));
        this.columns.find(x => x.dataIndex === 'serviceAdvisor').dictItems = userList;
        this.columns.find(x => x.dataIndex === 'chiefTechnician').dictItems = userList;
        // this.columns.find(x => x.dataIndex === 'technician').dictItems = userList;
        this.columns.find(x => x.dataIndex === 'balanceHandler').dictItems = userList;
        this.allUser = userList;
      }
    },
      //搜索获取数据
      changeHandle(val) {
        this.fetchParams = Object.assign({}, this.fetchParams, val);
        console.log(val);
      },
      //选中
      selectChange(rows) {
        this.selectedRows = rows;
        console.log(this.selectedRows);
      },
      //保存
      saveDialog() {
        this.$refs.formPanel1.SUBMIT_FORM();
        if (this.saveData) {
          this.$emit('save', this.selectedRows);
        }
      },
      //取消操作
      closeDialog() {
        this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
      },
      chooseOrderNo() {
        this.visible = true;
      },
      add() {},
      createFormList() {
        return [
          {
            type: 'INPUT',
            label: '搜索',
            fieldName: 'title',
            placeholder: '请输入标题名称...',
            rules: [{ required: true, message: '请输入标题名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
            readonly: true // 只读
          },
          {
            type: 'SELECT',
            label: '所属分类',
            fieldName: 'cid',
            placeholder: '所属分类',
            itemList: [{ text: '热点', value: '1' }, { text: '资讯', value: '2' }],
            rules: [{ required: true, message: '请选择所属分类', trigger: 'change' }],
            disabled: true // 禁用
          },
          {
            type: 'DATE',
            label: '日期',
            fieldName: 'date',
            placeholder: '选择日期',
            rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
          },
          {
            type: 'RANGE_DATE',
            label: '日期区间',
            style: { minWidth: '200px' },
            fieldName: 'startTime|endTime'
          },
          {
            type: 'MULTIPLE_SELECT',
            label: '兴趣爱好',
            fieldName: 'hobby',
            placeholder: '兴趣爱好',
            itemList: [{ text: '篮球', value: '1' }, { text: '足球', value: '2' }, { text: '乒乓球', value: '3' }],
            rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }]
          },
          {
            type: 'INPUT_NUMBER',
            label: '数量',
            fieldName: 'number',
            placeholder: '请输入数量...',
            initialValue: undefined,
            rules: [{ required: true, message: '请输入数量', trigger: 'blur' }]
          }
        ];
      },
      createFormList1() {
        return [
          {
            type: 'INPUT',
            label: '索赔类型',
            fieldName: 'title',
            placeholder: '请输入标题名称...',
            rules: [{ required: true, message: '请输入标题名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
            readonly: true // 只读
          },
          {
            type: 'SELECT',
            label: '所属分类',
            fieldName: 'cid',
            placeholder: '所属分类',
            itemList: [{ text: '热点', value: '1' }, { text: '资讯', value: '2' }],
            rules: [{ required: true, message: '请选择所属分类', trigger: 'change' }],
            disabled: true // 禁用
          },
          {
            type: 'DATE',
            label: '日期',
            fieldName: 'date',
            placeholder: '选择日期',
            rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
          },
          {
            type: 'TEXT_AREA',
            label: '故障现象',
            fieldName: 'hobby',
            placeholder: '故障现象',
            rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }],
            rows: 3,
            selfCols: 3 // 元素占据几行
          },
          {
            type: 'TEXT_AREA',
            label: '故障原因',
            fieldName: 'hobby',
            placeholder: '故障原因',
            rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }],
            rows: 3,
            selfCols: 3 // 元素占据几行
          },
          {
            type: 'TEXT_AREA',
            label: '维修方案',
            fieldName: 'hobby',
            placeholder: '维修方案',
            rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }],
            rows: 3,
            selfCols: 3 // 元素占据几行
          },
          {
            type: 'UPLOAD_IMG',
            label: 'VIN',
            fieldName: 'wayPicture',
            placeholder: '上传身份证...',
            rules: [{ required: true, message: '请上传身份证', trigger: 'change' }, { limit: 1, validator: this.validateFn, message: '请上传1张图片', trigger: 'change' }],
            upload: {
              actionUrl: '/api/file/oss/upload',
              fixedSize: [5, 3],
              limit: 1,
              isCalcHeight: true
            }
          },
          {
            type: 'UPLOAD_IMG',
            label: '里程（仪表）',
            fieldName: 'wayPicture1',
            placeholder: '上传身份证...',
            rules: [{ required: true, message: '请上传身份证', trigger: 'change' }, { limit: 1, validator: this.validateFn, message: '请上传1张图片', trigger: 'change' }],
            upload: {
              actionUrl: '/api/file/oss/upload',
              fixedSize: [5, 3],
              limit: 1,
              isCalcHeight: true
            }
          }
        ];
      },
      //table表头和数据源
      creatHeader() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },

          { title: '维修工单号', dataIndex: 'RO_NO', sorter: true,
            render: props => {
            if (getAppId() == 'beijing') {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.createDictText(props.row)}>
                  {props.row.RO_NO}
                </el-button>
              </div>
            );
            }else {
              return (
                <div>
                  {props.row.RO_NO}
                </div>
                );
            }
          } },
          { title: '维修经销商', dataIndex: 'OWNER_CODE', sorter: true },
          {
            title: '维修类型',
            dataIndex: 'REPAIR_TYPE_CODE',
            sorter: true,
            dictItems:[]
          },          { title: '维修里程', dataIndex: 'IN_MILEAGE', sorter: true },
          { title: '维修日期', dataIndex: 'RO_CREATE_DATE', sorter: true,dateFormat: 'yyyy-MM-dd' },
          { title: '备注', dataIndex: 'REMARK', sorter: true }
        ];
      },
      //table表头和数据源
      creatHeader1() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          // {
          //   title: '操作',
          //   dataIndex: 'column-action',
          //   width: 100,
          //   fixed: 'left',
          //   render: props => {
          //     return (
          //       <div style="text-align:center">
          //       <multiuse-button type="primary" icon="el-icon-delete" circle />
          //     </div>
          //   );
          //   }
          // },
          { title: '维修工单号', dataIndex: 'roNo', sorter: true},
          { title: '维修经销商', dataIndex: 'dealerName', sorter: true },
          { title: '维修类型', dataIndex: 'roType', sorter: true },
          { title: '维修量程', dataIndex: 'roRange', sorter: true },
          { title: '维修日期', dataIndex: 'roDate', sorter: true ,dateFormat: 'yyyy-MM-dd' },
          { title: '备注', dataIndex: 'roRemark', sorter: true }
        ];
      }
    }
  };
</script>

<style lang="less" scoped></style>
